<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" href="../css/aui.css">
      <style>

        .aui-title{
          font-size: 18px;
          font-weight: bold;
          padding: 1rem 1rem 0;
        }

        .aui-list input{
          font-size: 0.75rem;
        }
        .aui-list{
          padding: 10px 0;
        }

    .nav-title{
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding: 15px 0;
    }
    .nav-title .aui-list-header{
      background-color: #03A9F4;
      font-weight: bold;
      color: white;
      padding: 0.2rem 0.5rem;
      font-size: 0.65rem;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }

    .nav-title .arrow{
       border: 25px solid transparent;
       border-left: 50px solid #03a9f4;
       width: 0;
       height: 0px;
       border-top-right-radius: 2px;
       border-bottom-right-radius: 2px;
    }
    .aui-list{
      border-top: 0;
    }

    #show{
      display: block;
    }
    #hide{
      display: none;
    }
      </style>
  </head>
  <body>




       <div class="aui-card-list">
         <ul class="aui-list aui-list-in nav-title">
                 <li class="aui-list-header">
                     被临检人信息
                 </li>
                <!-- <li class="arrow"></li> -->
             </ul>

          <ul class="aui-list aui-form-list ">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        姓名
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="name" readonly="true">

                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        性别
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="gender" readonly="true">

                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        民族
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="nation" readonly="true">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        地址
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="address" readonly="true">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        身份证
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="idCard" readonly="true">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        临检时间
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" readonly="true" name="date">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        临检地址
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" readonly="true" name="place">
                    </div>
                </div>
            </li>
        </ul>
    </div>


<!-- 临检警察信息 -->
    <div class="aui-card-list">
      <ul class=" aui-list-in nav-title">
              <li class="aui-list-header">
                  临检警察信息
              </li>
             <!-- <li class="arrow"></li> -->
          </ul>
          <ul class="aui-list aui-form-list">

            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        警员名字
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="policeName" readonly="true">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        警察编号
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" name="policeNumber" readonly="true">
                    </div>
                </div>
            </li>
        </ul>
   </div>
<!-- 证件照信息 -->
    <div class="aui-card-list">
      <ul class="aui-list-in nav-title">
              <li class="aui-list-header">
                  证件照信息
              </li>
              <!-- <li class="arrow"></li> -->
          </ul>
            <div class="aui-card-list-content-padded">
                <img src="" id="imgFront" alt="身份证正面照"/>
            </div>
            <div class="aui-card-list-content-padded">
                <img src="" id="imgBack" alt="身份证背面照"/>
            </div>
        </div>

<!-- 临检图片区域 -->
<div class="aui-card-list" id="hide">
  <ul class="aui-list-in nav-title">
          <li class="aui-list-header">
              临检图片
          </li>
          <!-- <li class="arrow"></li> -->
      </ul>
      <div id="imgContainer"></div>
    </div>

  </body>
  <script type="text/javascript" src="./../script/api.js"></script>
  <script type="text/javascript" src="./../script/zepto.min.js"></script>
  <script type="text/javascript" src="../script/urlAddress.js"></script>
  <script type="text/javascript">
      apiready = function(){
        var data = api.pageParam.data;

          var timsgId = data.id
          main.init(timsgId);
            setRefreshHeaderInfo(timsgId);
          };


  var setRefreshHeaderInfo = function (id) {
    api.setRefreshHeaderInfo({
        visible: true,
        loadingImg: 'widget://image/refresh.png',
        bgColor: '#ccc',
        textColor: '#fff',
        textDown: '下拉刷新...',
        textUp: '松开刷新...',
        showTime: true
   }, function(ret, err) {
       main.init(id);
       api.refreshHeaderLoadDone();
   });
  }




var main =  {
    init:function (id) {
      if(id){
        $.ajax({
          url:URL+"edit/getTimsgInfo" ,
          type:"post",
          dataType:"json",
          data:{
            timsgId:id
          },
          success:function(data){
              var result = eval("("+data+")");
              if(result.msg==0){
                var val = result.val;
                var police = val.police;

                $("input[name=name]").val(val.name);
                $("input[name=gender]").val(val.gender);
                $("input[name=nation]").val(val.nation);
                $("input[name=address]").val(val.address);
                $("input[name=idCard]").val(val.idCard);
                $("input[name=place]").val(val.place);
                $("input[name=date]").val(main.replaceDate(val.date));
                $("#imgFront").attr("src",val.imgFront);
                $("#imgBack").attr("src",val.imgBack);
                $("input[name=policeName]").val(police.name);
                $("input[name=policeNumber]").val(police.id);


                var img = val.imgs;
                if(img){
                    $("#hide").attr("id","show");
                    var imgArray = img.split("::");
                    var html ="";
                    for(var i=0,len=imgArray.length;i<len;i++){
                      html+='<div class="aui-card-list-content-padded">'+
                      '<img src="'+imgArray[i]+'" alt="临检图片"/>'+
                      '</div>';
                    }
                    $("#imgContainer").html(html);
                }

              }
          }

        })
      }

    },
    replaceDate:function (date) {
        if(!date) return false;
        var result = date = new Date(date);
         result = result.getFullYear()+"-"+(result.getMonth()+1)+"-"+result.getDate();
        return result;
    }
  }
  </script>
  </html>
